<!DOCTYPE html>
<html>
<head>
    <title>问题</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>

    <script src="/js/plugins/form/jquery.form.js"></script>
    <script>
        $(function () {

            //拿出sessionStorage中存储的字符串json,并转为json对象
            var user = JSON.parse(sessionStorage.getItem("user"));
            //拿出用户的id
            // var userId = user.id;
            var ele =false;
            //提问按钮,触发模态框

            $("#askBtn").click(function () {
                if(user){
                    $("#userId").val(user.id)
                    $("#isAnswer").val(ele);
                    $("#askModal").modal("show");


                }else{
                    alert("请先登录");
                    window.location.href="/login.html"
                }

            })
            //提交表单
            $("#editForm").ajaxForm(function (data) {
                if (data.success) {
                    window.location.reload();
                }
            });
            $(".submitBtn").click(function () {
                $("#editForm").submit();

            })
            //定义关键字
            var keyword;
            //查询,提交查询条件
            $("#searchBtn").click(function () {
                keyword =  $("#search").val();
                if(user){
                    window.location.href="/searchQuestion.html?id="+user.id+"&keyword="+keyword;
                }else{
                    window.location.href="/searchQuestion.html?keyword="+keyword;
                }

            })



            //提过的问题分页
            var currentPage = 1;
            //总页数  用来判断是否是最后一页
            var pages;
            //[] 数组,一个容器 将每次拉倒底部查询的每页数据 数组都存放在里面
            var questionData =[];
            //变量表示 当前页是否已经在查询中 如果是 则不再查询,避免ajax的异步请求发送重复
            var loading= false;//查询状态
            //获取我的游记数据
            function query(){
                //如果当前为正在查询 则说明ajax已经发送 不需要重复发送
                if(loading){
                    return;
                }
                //每次在发送ajax前,将查询状态改为正在查询,
                loading = true;

                //获得关键字信息

                //发送请求查询当前攻略 的 评论信息
                $.get('/question/answer',{currentPage:currentPage},function (data) {
                    //将查询出来的需要的数据的数组放到容器中
                    $.merge(questionData,data.list);
                   // console.log(questionData);
                    //渲染数据
                    $("#question").renderValues({list:questionData},{

                        'getHref':function (item,value) {
                            var url = $(item).data('url');
                            $(item).attr('href',url+value);
                        },
                        'getUser':function (item,value) {
                            var url = $(item).data('url');
                            $(item).attr('href',url+value);
                        }
                    });

                    //当前页加1 下次将查询第二页数据
                    currentPage++;
                    //总页数
                    pages = data.pages;
                    //查询请求结果,则将查询状态改为 不在查询中
                    loading = false;
                });
            }



            //默认的第一次查第一页数据
            query();
            //给window绑定滚动事件,当window滚动式,调用其中的函数
            $(window).scroll(function () {
                //判断是否滚动到底部(屏幕高度+HTML滚动超出顶部的高度>=HTML文档的高度)
                if ($(window).height()+ $(document).scrollTop()+1>=$(document).height()) {
                    //滚动到当前文档底部,并且是否还有页数可以显示 有则继续查询出来显示
                    if(currentPage <= pages){
                        query();
                        //滚动到底部时,如果此时还有页数 弹出加载中信息
                        $(document).dialog({
                            type : 'notice',
                            infoText: '加载中',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }else{
                        //滚动到当前文档底部,如果已经是最后一页 则弹出已经到底
                        $(document).dialog({
                            type : 'notice',
                            infoText: '亲,已经到底了',
                            autoClose: 1500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                }

            });


            //回答过的问题分页
            var newCurrentPage = 1;
            //总页数  用来判断是否是最后一页
            var newPages;
            //[] 数组,一个容器 将每次拉倒底部查询的每页数据 数组都存放在里面
            var noAnswerData =[];
            //变量表示 当前页是否已经在查询中 如果是 则不再查询,避免ajax的异步请求发送重复
            var newLoading= false;//查询状态
            //获取我的游记数据
            function noAnswerQuery(){
                //如果当前为正在查询 则说明ajax已经发送 不需要重复发送
                if(newLoading){
                    return;
                }
                //每次在发送ajax前,将查询状态改为正在查询,
                newLoading = true;
                //发送请求查询当前攻略 的 评论信息
                $.get('/question/noAnswer/',{currentPage:newCurrentPage},function (data) {
                    //将查询出来的需要的数据的数组放到容器中
                    $.merge(noAnswerData,data.list);

                    //渲染数据
                    $("#noAnswer").renderValues({list:noAnswerData},{

                        'getHref':function (item,value) {
                            var url = $(item).data('url');
                            $(item).attr('href',url+value);
                        },

                        'getUser':function (item,value) {
                            var url = $(item).data('url');
                            $(item).attr('href',url+value);
                        }
                    });

                    //当前页加1 下次将查询第二页数据
                    newCurrentPage++;
                    //总页数
                    newPages = data.pages;
                    //查询请求结果,则将查询状态改为 不在查询中
                    newLoading = false;
                });
            }
            //默认的第一次查第一页数据
            noAnswerQuery();
            //给window绑定滚动事件,当window滚动式,调用其中的函数
            //需要点击触发

            $("#pills-noAnswer-tab").click(function () {

                $(window).scroll(function () {
                    //判断是否滚动到底部(屏幕高度+HTML滚动超出顶部的高度>=HTML文档的高度)
                    if ($(window).height()+ $(document).scrollTop()+1>=$(document).height()) {
                        //滚动到当前文档底部,并且是否还有页数可以显示 有则继续查询出来显示
                        if(newCurrentPage <= newPages){
                            noAnswerQuery();
                            //滚动到底部时,如果此时还有页数 弹出加载中信息
                            $(document).dialog({
                                type : 'notice',
                                infoText: '加载中',
                                autoClose: 1500,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                        }else{
                            //滚动到当前文档底部,如果已经是最后一页 则弹出已经到底
                            $(document).dialog({
                                type : 'notice',
                                infoText: '亲,已经到底了',
                                autoClose: 1500,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }
                    }

                });
            })










        })

    </script>


</head>

<body>

<!--高级查询--->
<div class="search-head">
    <div class="row nav-search">
            <div class="col-1">
                <a href="javascript:history.go(-1);">
                    <span><i class="fa fa-chevron-left fa-2x"></i></span>
                </a>

            </div>
            <div class="col-9">
                <div class="input-group-sm search" >
                    <form id="searchForm" action="" method="post">
                        <input class="form-control" name="keyword"  id="search" placeholder="提问前请先搜索">

                    </form>
                </div>
            </div>

        <div class="col-1">
            <i class="fa fa-search" id="searchBtn"
               style="color:white;font-size:25px;position: absolute;top: 23%;left: 10%">
            </i>
        </div>

    </div>
</div>


<!--活页-->
<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab">
    <li class="nav-item ">
        <a class="nav-link active" id="pills-question-tab" data-toggle="pill" href="#pills-question">
            <span>最热问题</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link " id="pills-noAnswer-tab" data-toggle="pill" href="#pills-noAnswer">
            <span>待回答问题</span>
        </a>
    </li>
</ul>
<div class="tab-content " id="pills-tabContent">
    <!--热门问题-->
    <div class="tab-pane fade show active" id="pills-question">

    <div id="question">
        <div render-loop="list">
            <div class="container row question">
                <div class="col-2 question-head">
                    <!--问题Id-->
                    <a render-key="list.user.id" render-fun="getUser" data-url="/userProfiles.html?id=">
                        <img class="rounded-circle"
                             render-src="list.user.headImgUrl"   width="100%">
                    </a>
                </div>
                <div class="col question-right">
                    <p class="authorName"><span render-html="list.user.nickName"></span></p>

                    <!--<span class="question-date" render-html="list.createTime"></span>-->
                    <div class="question-content">
                        <a data-url="/answer.html?id=" render-key="list.id" render-fun="getHref">
                            <p render-html="list.content"></p>
                        </a>
                    </div>



                    <div class="d-flex icon">

                            <i class="fa  fa-commenting-o " style="margin-right: 10px" render-html="list.answerSum"></i>
                            <!--<i class="fa fa-thumbs-o-up"> <span>9999浏览</span> </i>-->

                    </div>
                    <div class="d-flex icon">
                        <i class="question-date" render-html="list.createTime" style="margin-right: 10px"></i>
                    </div>

                </div>
            </div>

        </div>
    </div>
    </div>

    <!--待回答问题-->
    <div class="tab-pane fade " id="pills-noAnswer">
        <div id="noAnswer">
            <div render-loop="list">
                <div class="container row noAnswer">
                    <div class="col-2 noAnswer-head">
                        <a render-key="list.user.id" render-fun="getUser" data-url="/userProfiles.html?id=" >
                            <img class="rounded-circle"
                                 render-src="list.user.headImgUrl"   width="100%">
                        </a>
                    </div>
                    <div class="col question-right">
                        <p class="authorName"><span render-html="list.user.nickName"></span></p>

                        <!--<span class="question-date" render-html="list.createTime"></span>-->
                        <div class="question-content">
                            <a data-url="/answer.html?id=" render-key="list.id" render-fun="getHref">
                                <p render-html="list.content"></p>
                            </a>
                        </div>



                        <div class="d-flex icon">

                            <i class="fa  fa-commenting-o " style="margin-right: 10px" render-html="list.answerSum"></i>
                            <!--<i class="fa fa-thumbs-o-up"> <span>9999浏览</span> </i>-->

                        </div>
                        <div class="d-flex icon">
                            <i class="question-date" render-html="list.createTime" style="margin-right: 10px"></i>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>


</div>
<!--用户提问-->
<div class="row nav-ask">
<div class="operation" class="col-12" >
    <button class="btn" style="display: none"></button>
    <button class="btn" id="askBtn" style="margin-left: 90px">提问</button>
</div>
</div>



<div class="col-9">
    <div class="input-group-sm search" >

    </div>
</div>

<!--提问模态框-->
<div class="modal fade" id="askModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <!--<h4 class="modal-title">问题</h4>-->
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/question/save.do" method="post" id="editForm">
                    <!--用户ID-->
                    <input type="hidden" name="user.id" id="userId"/>
                    <input type="hidden" name="isAnswer" id="isAnswer">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">你的提问：</label>
                        <div class="col-sm-12">
                            <!--<input type="text" class="form-control" name="name"/>-->
                            <textarea name="content" class="form-control"></textarea>

                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-success submitBtn">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>